<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用动画方法</title>
  <script src="jQuery/jquery-3.7.1.js"></script>
</head>
<body>
    <p>这是文字段落1</p>
    <p>这是文字段落2</p>
    <p>这是文字段落3</p>
    <p>这是文字段落4</p>
    <p>这是文字段落5</p>
    <button id="btn1">全部隐藏</button>
    <button id="btn2">全部显示</button>
    <button id="btn3">以淡入淡出方式切换，速度慢</button>
    <button id="btn4">以卷帘收起方式隐藏第3个段落，速度500</button>
    <button id="btn5">将第2个段落切换至透明度0.3，回调函数弹窗显示“第2个段落透明度已切换至0.3”</button>
  <script>
		$(function(){
		    // 为所有按钮绑定点击事件
		    $('#btn1').click(function(){
		        // 点击“全部隐藏”按钮时，隐藏所有的<p>元素
		        $('p').hide();
		    });
		
		    $('#btn2').click(function(){
		        // 点击“全部显示”按钮时，显示所有的<p>元素
		        $('p').show();
		    });
		
		    $('#btn3').click(function(){
		        // 点击以淡入淡出方式切换，速度慢的按钮时，使用fadeToggle方法
		        $('p').fadeToggle('slow');
		    });
		
		    $('#btn4').click(function(){
		        // 点击以卷帘收起方式隐藏第3个段落，速度500的按钮时，使用slideUp方法
		        $('p').eq(2).slideUp(500); // 注意索引是从0开始，所以第3个段落是eq(2)
		    });
		
		    $('#btn5').click(function(){
		        // 将第2个段落切换至透明度0.3，并在动画完成后弹窗显示消息
		        $('p').eq(1).animate({opacity: '0.3'}, function(){
		            alert('第2个段落透明度已切换至0.3');
		        });
		    });
		});
  </script>
</body>
</html>
